{% stylesheet %}
.collection_product {
  display: grid;
  grid-template-columns: repeat(var(--pc_number), 1fr);
  grid-row-gap: 30px;
  grid-column-gap: 30px;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .collection_product {
    grid-template-columns: repeat(var(--wap_number), 1fr);
    grid-row-gap: 15px;
    grid-column-gap: 15px;
  }
}

{% endstylesheet %}
<div class="container-wrapper block_padding">
    {% if section.settings.title != '' or section.settings.detail != '' %}
    <div class="block_title">
        <h2>{{ section.settings.title }}</h2>
        {% if section.settings.detail != "" %}
        <div class="block_title-detail">{{ section.settings.detail }}</div>
        {% endif %}
    </div>
    {% endif %}

    <div class="collection_product" style="--pc_number:{{section.settings.pc_number}};--wap_number:{{section.settings.wap_number}}">
      {% get_products collection_id = {section.settings.collection.id} limit = { section.settings.product_number } %}
      {%- if products.size > 0 -%}
      {% for product in products %}
      {% include 'collection_product', collection_handle:collection.handle, product:product %}
      {% endfor %}
      {%- else -%}
      {%- for i in (1..8) -%}
      {% include 'collection_product' %}
      {%- endfor -%}
      {%- endif -%}
    </div>
</div>
{% schema %}
{
	"tag": "",
	"class": "block_collection_list",
	"icon": "icon-zhuanjishangpin",
	"is_global": false,
	"name": {
		"zh_CN": "专辑商品"
	},
	"max_blocks": "20",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置"
			}
		},
		{
			"type": "card_collection",
			"label": {
				"zh_CN": "选择专辑"
			},
			"default": {
				"id": "",
				"title": ""
			},
			"id": "collection"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题"
			},
			"id": "title",
			"default": "New Arrivals"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述"
			},
			"id": "detail",
			"default": "bottom_center"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "产品总数量"
			},
			"id": "product_number",
			"default": "8"
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "PC每排数量"
			},
			"id": "pc_number",
			"max": "5",
			"min": "3",
			"default": "4"
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "移动端每排数量"
			},
			"id": "wap_number",
			"max": "2",
			"min": "1"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"collection": {
				"id": "",
				"title": ""
			},
			"title": "Collection",
			"detail": "",
			"product_number": "8",
			"pc_number": "4",
			"wap_number": "2"
		},
		"blocks": []
	}
}
{% endschema %}